<template>
  <div class="page-container page-container-detail-page">
    <!--面包屑导航-->
    <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>营销中心</el-breadcrumb-item>
            <el-breadcrumb-item>通用促销</el-breadcrumb-item>
            <el-breadcrumb-item>赠送类促销详情</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <!--添加赠品-优惠券-->
    <el-dialog title="查看优惠券" :inline="true" :visible.sync="giftCouponsVisible" :close-on-click-modal="false">
      <div v-if="false">
        <el-form :model="giftCouponsForm" label-width="90px" ref="giftProductForm" :size="size">
          <div >
            <el-form-item label="优惠券ID" prop="couponId">
              <el-input v-model="giftCouponsForm.couponId"  auto-complete="off" clearable  placeholder="优惠券ID" maxlength="80"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div>
        <el-table :data="giftCouponsTableData" >
          <el-table-column align="center" label="优惠券ID" width="300">
            <template slot-scope="scope">
              <span>{{ scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="优惠券名称" width="250">
            <template slot-scope="scope">
              <span>{{ scope.row.couponName}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="面值" width="200">
            <template slot-scope="scope">
              <span>{{ scope.row.couponAmount}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="有效时间" width="360">
            <template slot-scope="scope">
              <span>{{ scope.row.couponUseStartTime}}-{{ scope.row.couponUseEndTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="每人限领（张）" align="center" width="180">
            <template slot-scope="scope"  align="center">
              <span>{{scope.row.individualLimit  || '-'}}</span>
<!--              <el-input v-model="scope.row.individualLimit" disabled="true" clearable></el-input>-->
            </template>
          </el-table-column>
          <el-table-column label="使用条件" align="center" width="180">
            <template slot-scope="scope"  align="center">
              <span>满{{scope.row.useTotalAmountLimit}}元可用</span>
            </template>
          </el-table-column>
          <el-table-column  label="总量限制/已发行量" align="center"  width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.grantTotalNum}}/{{ scope.row.grantNum}}</span>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" class="textButton" @click="deleteGiftItem(2, scope.row.itemId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForGiftCoupons"
            :current-page="giftCouponsForm.start"
            :page-size="giftCouponsForm.limit"
            :total="giftCouponsTableDataSize"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForGiftCoupons"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c" >
        <el-button type="primary" plain :size="size" @click.native="giftCouponsVisible = false" class="cancelButton">取消</el-button>
      </div>
    </el-dialog>

    <!--审核弹框-->
    <el-dialog title="管理员备注" class="el-dialog-style" :visible.sync="dialogVisibleAdmin" :close-on-click-modal="false">
      <el-form :model="adminDataForm" label-width="100%" :size="size"
               label-position="right" inline  ref="adminDataForm"
               :rules="adminDataFormRules">
        <el-form-item class="textarea" prop="auditRemark">
          <el-input
            type="textarea"
            placeholder="请输入备注"
            v-model="adminDataForm.auditRemark"
            :rows="4"
            clearable>
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" plain :size="size" @click.native="submitFormAdminNotPass" class="cancelButton">不通过</el-button>
        <el-button type="primary" :size="size" @click.native="submitFormAdmin" class="searchButton">通过</el-button>
      </div>
    </el-dialog>

    <el-dialog title="查看赠品" :inline="true" :visible.sync="giftProductVisible" :close-on-click-modal="false">
      <div class="flex">
        <el-form inline :model="seeGiftProductForm" label-width="120px" ref="seeGiftProductForm" :size="size">
          <div >
            <el-form-item label="商品名称：" prop="mpName">
              <el-input v-model="seeGiftProductForm.mpName" auto-complete="off" clearable placeholder="商品名称" maxlength="80"></el-input>
            </el-form-item>
            <el-form-item label="商品编号：" prop="mpCode">
              <el-input v-model="seeGiftProductForm.mpCode" auto-complete="off" clearable placeholder="商品编号" maxlength="80"></el-input>
            </el-form-item>
          </div>
          <div class="t_r mb30">
            <el-button class="resetButton" icon="el-icon-refresh" size="mini" @click="resetForm('seeGiftProductForm')">重置</el-button>
            <el-button class="searchButton"  size="mini" @click="checkPro(null)" icon="el-icon-search">搜索</el-button>
            
          </div>
        </el-form>
      </div>
      <div>
        <el-table :data="giftProductTableData"  style="width: 100%">
          <el-table-column prop="code" label="商品编码" align="center" key="2" width="250"></el-table-column>
          <el-table-column prop="chineseName" label="商品名称" align="center" key="3" width="300"></el-table-column>
          <el-table-column prop="goodsCategory" label="商品分类" align="center" key="4" width="200"></el-table-column>
          <el-table-column prop="storeName" label="所属商户" align="center" key="6" width="200"></el-table-column>
          <el-table-column prop="salePrice" label="原价(元)" align="center" key="7" width="200"></el-table-column>
          <!-- <el-table-column prop="merchantName" label="商家名称" align="center" key="7"></el-table-column> -->
          <el-table-column prop="giftNum" label="单次赠送数量" align="center" key="8" width="250">
            <template slot-scope="scope" prop="giftNum" align="center">
              <span>{{scope.row.giftNum  || '-'}}</span>
<!--              <el-input v-model="scope.row.giftNum" @blur="updateGiftItem(scope.row)" clearable :disabled="true"></el-input>-->
            </template>
          </el-table-column>
          <el-table-column prop="channelMerchantLimit" label="商家限购" align="center" key="9" v-if="false" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.channelMerchantLimit  || '-'}}</span>
<!--              <el-input v-model="scope.row.channelMerchantLimit" @blur="updateGiftItem(scope.row)" clearable :disabled="true"></el-input>-->
            </template>
          </el-table-column>
          <el-table-column prop="channelIndividualLimit" align="center" label="个人限购" key="10" width="200">
            <template slot-scope="scope">
              <span>{{scope.row.channelIndividualLimit  || '-'}}</span>
<!--              <el-input-->
<!--                v-model="scope.row.channelIndividualLimit"-->
<!--                @blur="updateGiftItem(scope.row)" clearable :disabled="true"-->
<!--              />-->
            </template>
          </el-table-column>
          <el-table-column prop="orderLimit" label="订单限购" align="center" key="11 " width="200">
            <template slot-scope="scope">
              <span>{{scope.row.orderLimit  || '-'}}</span>
<!--              <el-input v-model="scope.row.orderLimit" @blur="updateGiftItem(scope.row)"  clearable :disabled="true"/>-->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center"  key="12" width="200">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="textButton"
                @click="deleteGiftItem(1, scope.row.itemId)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="toolbar t_r">
          <el-pagination
            layout="total, sizes, prev, pager, next, jumper"
            @current-change="handleCurrentChangeForSeeGiftProduct"
            :current-page="seeGiftProductForm.start"
            :page-size="seeGiftProductForm.limit"
            :total="seeGiftProductTableDataSize"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="handleSizeChangeForSeeGiftProduct"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c" >
        <el-button class="cancelButton" :size="size" @click.native="giftProductVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--工具栏-->
    <div class="page-container-detail">
      <p class="pageName">赠送类促销详情</p>
      <div class="toolbar">
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
          <div style="width: 100%;">
            <el-form-item>
              <span class="color333 font18">活动名称：</span>
              <span class="color333 font18">{{activityData.promName}}</span>
            </el-form-item>
            <el-form-item>
              <span class="color333 font18">活动ID：</span>
              <span class="color333 font18">{{activityData.promotionCode}}</span>
            </el-form-item>
            <el-form-item>
              <span class="color333 font18">当前状态：</span>
              <span class="color333 font18" v-if="activityData.status == 9">草稿状态</span>
              <span class="color333 font18" v-else-if="activityData.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="activityData.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="activityData.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="activityData.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="activityData.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="activityData.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="activityData.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="activityData.status == 8">已结束</span>
              <span class="color333 font18" v-else>未知状态</span>
            </el-form-item>
          </div>
        </el-form>
        <el-form :inline="true" :model="filters" :size="size" ref="filters" v-if="activityData.editFlag">
         <el-row class="search-button">
            <span v-if="activityData.status == 2 || activityData.status == 4">
                  <div >
                  <kt-button  class="searchButton" :size="size" @click="shenheHuodong(1)" label="审核"></kt-button>
                    </div>
                </span>
            <span v-if="activityData.status == 1">
              <div >
                <kt-button  class="searchButton" :size="size" @click="shenheHuodong(0)" label="提交审核"></kt-button>
              </div>
            </span>
          </el-row>
        </el-form>
      </div>
      <div class="tab-container tab-container-noPadding">
        <el-tabs type="border-card">
          <el-tab-pane label="促销规则">
            <div>
              <form class="form-horizontal ">

                <div class="basicInfo">基本设置：</div>

                <div class="form-group">
                  <!--活动名称-->
                  <label class="color333 font16 ml32" ng-show="promotionDetailContent.promotionMethod != 17">活动名称：</label>
                  <div class="color333">{{activityData.promName}}</div>
                </div>

                <div class="form-group">
                  <!--活动时间-->
                  <label class="color333 font16 ml32">活动时间：</label>
                  <div class="color333">{{activityData.startTime}} 至 {{activityData.endTime}}</div>
                </div>

                <div class="form-group">
                  <label class="color333 font16 ml32">活动搜索词：</label>
                  <div class="color333">{{activityData.searchKeyword}}</div>
                </div>

                <div class="form-group">
                  <label class="color333 font16 ml32">活动费用预算：</label>
                  <div class="color333">{{activityData.budget}}</div>
                </div>

                <div class="form-group">
                  <label class="color333 font16 ml32">预警比例：</label>
                  <div class="color333">{{activityData.warningNum}}</div>
                </div>

                <div class="basicInfo">活动规则：</div>
                <div class="form-group">
                  <!--活动类型(促销类型)-->
                  <label class="color333 font16 ml32">活动类型：</label>
                  <div class="color333">{{getFrontPromType(activityData.frontPromType)}}</div>
                </div>

                <div class="form-group" v-if="activityData.frontPromType == 9">
                  <label class="color333 font16 ml32">主赠相同：</label>
                  <div class="color333">
                    <span v-if="activityData.mainGiftSameFlag==0"> 否</span>
                    <span v-else> 是</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="color333 font16">是否叠加应用：</label>
                  <div class="color333">
                    <span v-if="parseInt(activityData.overlayAppFlag) == 0">否（超量：按最高层级享受优惠）</span>
                    <span v-if="parseInt(activityData.overlayAppFlag) == 1">是（倍量：每满一级优惠一次）上限{{activityData.overlayAppNum}}次</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="color333 font16 ml32">赠品类型：</label>
                  <div class="color333">
                    <span v-if="activityData.giftType==1"> 赠商品</span>
                    <span v-if="activityData.giftType==2"> 赠优惠券</span>
                    <span v-if="activityData.giftType==3">赠红包</span>
                  </div>
                </div>

                <div class="form-group">
                  <label class="color333 font16 ml32">优惠设置：</label>
                  <div class="color333 flex oh">
                    <li class="mr10 f_l" v-for="(item,index) in activityData.promotionRules" :key="item.conditionValue">满{{item.conditionValue}}<span v-if="activityData.frontPromType==8">元</span><span v-if="activityData.frontPromType==9">件</span>赠{{item.contentValue}}<span v-if="activityData.giftType==1">件</span><span v-if="activityData.giftType==2">张</span><span v-if="activityData.giftType==3">个</span><span v-if="index<activityData.promotionRules.length-1">&nbsp;|&nbsp;</span></li>&nbsp;
                  </div>
                </div>
                <div class="form-group flexBox">
                  <label class="color333 font16 ml32 titleText">活动描述：</label>
                  <div class="color333">{{activityData.description}}</div>
                </div>


                <div class="basicInfo">交易规则：</div>

                <!-- <div class="line line-dashed b-b line-lg ng-scope"></div> -->
                <div class="form-group"  v-if="deptType != 3">
                  <label class="color333 font16 ml32">是否分摊：</label>
                  <div class="color333">
                    <span v-if="parseInt(activityData.costAllocationFlag) == 0">否</span>
                    <span
                      v-if="parseInt(activityData.costAllocationFlag) == 1"
                    >是</span>
                  </div>
                </div>
                <div class="form-group"  v-if="activityData.costAllocationFlag == 1 && deptType != 3">
                  <label class="color333 font16 ml32">分摊比例：</label>
                  <div class="color333">
                    <span v-if="activityData.parentAllocationScale">平台比例：{{activityData.parentAllocationScale}}%</span>
                    <span v-if="activityData.merchantAllocationScale">商户比例：{{activityData.merchantAllocationScale}}%</span>
                  </div>
                </div>

                <div class="basicInfo">参与条件：</div>

                <div ng-controller="activitiObjDetailCtrl">
                  <div class="form-group">
                    <label class="color333 font16 ml32">新老用户：</label>
                    <div class="color333">
                      <span
                        v-for="(item) in (activityData.proUserType + '').split(',')"
                        :key="item"
                        class="ng-binding ng-scope"
                      >{{getProUserType(item)}} &nbsp;</span>
                      <!-- <span ng-repeat="userScope in promotionDetailContent.userScopeList" class="ng-binding ng-scope">新用户 &nbsp;</span> -->
                    </div>
                  </div>

                  <!-- <div class="line line-dashed b-b line-lg"></div> -->
                  <div class="form-group" v-if="activityData.memTypes != null">
                    <label class="color333 font16 ml32">会员类型：</label>
                    <div class="color333">
                      <span
                        v-for="item in (activityData.memTypes + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >
                        <span v-if="item == 1">
                        普通会员 &nbsp;
                        </span>
                        <span v-if="item == 2">
                        VIP会员 &nbsp;
                        </span>
                        <span v-if="item == 3">
                        分期会员 &nbsp;
                        </span>
                      </span>
                      <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                    </div>
                  </div>
                  <div class="form-group" v-if="activityData.channelId != null">
                    <label class="color333 font16 ml32">渠道入口：</label>
                    <div class="color333">
                      <span
                        v-for="item in (activityData.memTypes + '').split(
                          ','
                        )"
                        :key="item"
                        class="ng-binding ng-scope"
                      >
                        <span v-if="item == 1">
                        企业微信 &nbsp;
                        </span>
                        <span v-if="item == 2">
                        xxx &nbsp;
                        </span>
                        <span v-if="item == 2">
                        yyy &nbsp;
                        </span>
                      </span>
                      <!-- <span ng-repeat="type in promotionDetailContent.memberTypeList" class="ng-binding ng-scope">普通会员 &nbsp;</span> -->
                    </div>
                  </div>

                  <div
                    class="form-group ng-scope"
                    ng-if="promotionDetailContent.promotionType != 12"
                  >
                    <!--备注-->
                    <label class="color333 font16 ml64">备注：</label>
                    <p v-html="activityData.remark">{{activityData.remark}}</p>
                  </div>

                </div>
              </form>
            </div>
          </el-tab-pane>
          <el-tab-pane label="参与商品">
            <el-tabs v-model="productStatusTabs">
              <el-tab-pane :label="noMutexProductLabel" name="1">
                <div>
                  <el-table :data="merchantProductTableData"   :size="size"
                            row-key="id"
                            default-expand-all
                            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                            class="tableStyle">
<!--                  <el-table-column type="selection" width="55"></el-table-column>-->
                      <el-table-column prop="mpCode" label="商品编码" width="180" align="left"></el-table-column>
                      <el-table-column prop="mpName" label="商品名称" width="180"></el-table-column>
                      <el-table-column prop="categoryName" label="商品分类" width="180"></el-table-column>
                      <el-table-column prop="salePrice" label="原价（元）"></el-table-column>
                      <el-table-column prop="stock" label="库存"></el-table-column>
                      <el-table-column prop="storeName" label="所属商户"></el-table-column>
                      <el-table-column prop="storeName" label="商户Code"></el-table-column>
                      <el-table-column prop="stockLimit" label="活动库存"></el-table-column>
                      <el-table-column prop="individualLimit" label="个人限购"></el-table-column>
                      <el-table-column prop="orderLimit" label="订单限购"></el-table-column>
                    </el-table>
                  <!--分页栏-->
                  <div class="toolbar t_r">
                    <el-pagination
                      @size-change="handleSizeChangeMerchantProductTableData"
                      @current-change="handleCurrentChangeMerchantProductTableData"
                      :current-page="merchantProductSearchForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="merchantProductSearchForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="merchantProductTableDataTotal">
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="mutexProductLabel" name="2">
                <div>
                  <el-table :data="mutexProductList" row-key="id" default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width: 100%" @selection-change="handleSelectionChange" class="tableStyle">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="mpCode" label="商品编码" width="200"  align="left"></el-table-column>
                    <el-table-column prop="mpName" label="商品名称" width="200"></el-table-column>
                    <el-table-column prop="categoryName" label="商品分类" width="200"></el-table-column>
                    <el-table-column prop="stock" label="库存" width="200"></el-table-column>
                    <el-table-column prop="salePrice" label="原价（元）" width="200"></el-table-column>
                    <el-table-column prop="storeName" label="所属商户" width="200"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="390">
                      <template slot-scope="scope">
                    <el-button @click="getMutexInfo(scope.row)" v-if="scope.row.typeOfProduct==20" type="text" class="textButton" size="small">查看详情</el-button>
                    <!-- <el-button @click="renewAdd(scope.row)" v-if="scope.row.typeOfProduct==10 || scope.row.typeOfProduct==20" type="text" class="textButton" size="small">重新添加</el-button> -->
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="toolbar t_r" >
                    <el-pagination
                      @size-change="handleSizeChangeMutexProductList"
                      @current-change="handleCurrentChangeMutexProductList"
                      :current-page="mutexProductForm.start"
                      :page-sizes="[10, 20, 30, 40]"
                      :page-size="mutexProductForm.limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="mutexProductTotal"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="参与赠品">
            <div>
              <el-table :data="giftRuleTable" >
                <el-table-column label="优惠阶梯" type="index"  width="200px"></el-table-column>
                <el-table-column label="促销规则">
                  <template slot-scope="scope">
                        <span>
                          满
                          <span>{{scope.row.conditionValue}}</span>
                          <span v-if="activityData.frontPromType == 8">
                            元
                          </span>
                          <span v-else>
                            件
                          </span>
                        </span>
                  </template>
                </el-table-column>
                <el-table-column label="促销赠品">
                  <template slot-scope="scope">
                    <el-button size="mini" @click="checkPro(scope.row)" type="text">查看赠品</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
     <!-- 互斥活动详情 -->
    <el-dialog :visible.sync="mutexPromotionVisible" title="互斥活动详情"  :close-on-click-modal="false">
      <div>
        <el-table :data="mutexPromotionList" ref="multipleTable" :size="size">
          <el-table-column prop="promotionCode" width="280" label="互斥活动编码" sortable align="center"></el-table-column>
          <el-table-column prop="promName"  width="150" label="互斥活动名称" align="center">
            <template slot-scope="scope">
              <el-button @click="linkInfoByMutexProduct(scope.row.promotionId,scope.row.promType)" type="text" class="textButton" size="small">{{scope.row.promName}}</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="goodsCategory"  width="360" label="互斥活动时间" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.startTime}} - {{scope.row.endTime}}</span>
              </template>
          </el-table-column>
          <el-table-column prop="storeName" label="活动状态" align="center" width="200">
            <template slot-scope="scope">
              <span class="color333 font18" v-if="scope.row.status == 0">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 1">待提交</span>
              <span class="color333 font18" v-else-if="scope.row.status == 2">待审核</span>
              <span class="color333 font18" v-else-if="scope.row.status == 3">未开始</span>
              <span class="color333 font18" v-else-if="scope.row.status == 4">审核不通过</span>
              <span class="color333 font18" v-else-if="scope.row.status == 5">进行中</span>
              <span class="color333 font18" v-else-if="scope.row.status == 6">已过期</span>
              <span class="color333 font18" v-else-if="scope.row.status == 7">已关闭</span>
              <span class="color333 font18" v-else-if="scope.row.status == 8">已结束</span>
              <span class="color333 font18" v-else-if="scope.row.status == 9">活动草稿</span>
            </template>
          </el-table-column>
          <el-table-column prop="creatorName" label="创建人" align="center" width="200"></el-table-column>
          <el-table-column prop="deptName"  label="创建组织" align="center" width="200"></el-table-column>
        </el-table>
        <!--分页栏-->
        <div class="toolbar t_r">
          <el-pagination
            @size-change="mutexPromotionListSizeChange"
            @current-change="mutexPromotionListCurrentChange"
            :current-page="mutexPromotionForm.start"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="mutexPromotionForm.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="mutexPromotionListTotal"
          ></el-pagination>
        </div>
      </div>
      <div slot="footer" class="dialog-footer t_c">
        <el-button type="primary" plain :size="size" @click.native="mutexPromotionVisible = false" class="searchButton">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import KtButton from "@/views/Core/KtButton";
  import { format } from "@/utils/datetime";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { darkmagenta } from 'color-name';
  import tabPane from './components/TabPaneCreateGroupon'
  import qs from 'qs';
  import { promTypeConverter, frontPromTypeConverter,channelCodeConverter,proPlatformConverter, proUserTypeConverter,proMemberTypeConverter ,proMemberLevelConverter} from "@/market/dict/marketDict";
  import marketRequest from "@/market/request/marketRequest";
  export default {
    name: 'Tab',
    components: {
      tabPane ,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        deptType:localStorage.getItem("deptType"),//当前登录用户所属组织类型
        channelList:[{childName:"卡奥斯运营中心",id:"179"}],
        redPacketsTableData:[],
        redPacketsVisible:false,
        redPacketsTableDataSize:0,
        giftCouponsTableData: [],
        giftCouponsVisible: false,
        giftCouponsTableDataSize: 0,
        giftCouponsForm: {
          start:1,
          limit:10,
        },
        redPacketsForm: {
          start:1,
          limit:10,
        },
        seeGiftProductTableDataSize: 0,
        giftProductVisible: false,
        giftProductTableData: [],
        currentRule:{},
        seeGiftProductForm:{
          start:1,
          limit:10,
          mpCode:null,
          mpName:null
        },
        giftProductForm:{
          start:1,
          limit:10,
          productName:"",
          productNo:"",
          barCode:"",
          chineseName:"",
          code:""
        },
        giftRuleTable:[],
        merchantProductTableData:[],
        merchantProductTableDataTotal:0,
        merchantProductSearchForm: {
          promotionId: this.promotionId,
          merchantId: null,
          mpCode: null,
          mpName: null,
          categoryName: null,
          start: 1,
          limit: 10,
        },
        adminDataForm:{
          auditRemark:""
        },
        adminDataFormRules: {
          auditRemark: [
            { required: true, message: "审核意见不能为空", trigger: "blur" }
          ]
        },
        dialogVisibleAdmin: false,
        shenhe:0,
        size: "small",
        filters: {},
        multipleSelection: [],
        giftProductEditLoading: false,
        businessList: [{"id": "001", "name": "张小二服饰", "type": "自营商家"}],
        businessListTotal:0,
        businessForm:{
          promotionId : this.promotionId,
          merchantType: "1",
          pageNo: 1,
          pageSize: 10,
        },
        shopList: [{"id": "161616", "name": "张小二bbc店铺", "type": "直营"}],
        shopForm:{
          promotionId : this.promotionId,
          merchantType: "2",
          pageNo: 1,
          pageSize: 10,
        },
        shopListTotal:0,
        tableData: [{
          "id": 1912250010887324,
          "productName": "新供应商001",
          "unit": '件',
          "shopName": '张小二服饰',
          "price": 1.2,
          "markdown": 1,
          "shopLimit1": 100,
          "shopLimit2": 100,
          "shopLimit3": 100,
        }],
        promotionId: this.$route.params.id,
        activityData: {

        },


        productStatusTabs: "1",
        noMutexProductLabel:"生效商品（0）",
        mutexProductForm:{
          promotionId: this.$route.params.id,
          mutexFlag:1,//互斥标识
          start: 1,
          limit: 10
        },
        mutexProductList:[],
        mutexProductTotal:0,
        mutexProductLabel:"互斥商品（0）",
        mutexPromotionForm:{
          promotionId: this.$route.params.id,
          start:1,
          limit:10,
        },
        mutexPromotionList:[],
        mutexPromotionListTotal:0,
        mutexPromotionVisible:false,

        levelList: [],

      };
    },
    created: function(){
      this.findAllRules();
      this.getDetailById();
      // this.mainMerchantFormFind();
      // this.mainStoreTableDataFormFind();
      this.getMerchantProductList();
      this.getMutexProductList();
      // this.getChildList();
    },
    methods: {

      getDetailById(){
        let _this = this;
        let callback = res => {

          if (res.code == "0000") {
            _this.activityData = res.data;
          } 
        };
        this.promotionId = this.$route.params.id;
        let params = { id: this.$route.params.id };
        this.utils.request.promotionDetailById(params, callback);
      },

      handleCurrentChangeMerchantProductTableData(pageNum){
        this.merchantProductSearchForm.start = pageNum;
        this.getMerchantProductList();
      },
      handleSizeChangeMerchantProductTableData(val){
        this.merchantProductSearchForm.limit = val;
        this.merchantProductSearchForm.start = 1;
        this.getMerchantProductList();
      },
      handleSizeChangeForRedPackets: function (pageSize) {
        this.redPacketsForm.limit = pageSize;
        this.redPacketsForm.start = 1;
        this.getRedPacketsItemList();
      },
      handleCurrentChangeForRedPackets: function (pageNum) {
        this.redPacketsForm.start = pageNum;
        this.getRedPacketsItemList();
      },
      getRedPacketsItemList(){
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.redPacketsTableData = res.data.rows.map((ele, index) => {
              let item = {
                //id: ele.id,
                id: ele.couponId,
                couponName: ele.couponName,
                couponAmount: ele.couponAmount,
                couponUseStartTime: ele.couponUseStartTime,
                couponUseEndTime: ele.couponUseEndTime,
                grantTotalNum: ele.grantTotalNum,
                grantNum: ele.grantNum,
                individualLimit: ele.individualLimit,
                couponUseDesc: ele.couponUseDesc,
                useTotalAmountLimit: ele.useTotalAmountLimit,
                itemId: ele.id,
              };
              return item;
            });
            this_.redPacketsTableDataSize = res.data.total;
          }
        };
        this.redPacketsForm.promotionId = this.promotionId;
        this.redPacketsForm.promotionRuleId = this.currentRule.id;
        this.redPacketsForm.giftType = 5;
        marketRequest.promotionGiftItemFindByPage(this.redPacketsForm, callback);
      },

      // 换页刷新
      shophandleSizeChange: function (pageSize) {
        this.shopForm.pageSize = pageSize;
        this.shopForm.pageNo = 1;
        this.mainStoreTableDataFormFind();
      },
      shophandleCurrentChange(pageNo) {
        this.shopForm.pageNo = pageNo;
        this.mainStoreTableDataFormFind();
      },
      // 换页刷新
      businesshandleSizeChange: function (pageSize) {
        this.businessForm.pageSize = pageSize;
        this.businessForm.pageNo = 1;
        this.mainMerchantFormFind();
      },
      businesshandleCurrentChange(pageNo) {
        this.businessForm.pageNo = pageNo;
        this.mainMerchantFormFind();
      },
      deleteGiftItem(type, id){
        let this_ = this;
        let callback = res => {
          if (res.code == "0000") {
            if(type == 1){
              this_.getGiftItemList();
            }else if(type == 2){
              this_.getGiftCouponItemList();
            }else{
              this_.getRedPacketsItemList();
            }
          }
        };
        let param ={
          id: id,
          deleteFlag: 1,
        };
        marketRequest.promotionGiftItemDeleteById(param, callback);
      },
      handleSizeChangeForGiftCoupons: function (pageSize) {
        this.giftCouponsForm.limit = pageSize;
        this.giftCouponsForm.start = 1;
        this.getGiftCouponItemList();
      },
      handleCurrentChangeForGiftCoupons: function (pageNum) {
        this.giftCouponsForm.start = pageNum;
        this.getGiftCouponItemList();
      },
      handleSizeChangeForSeeGiftProduct(pageSize){
        this.seeGiftProductForm.limit = pageSize;
        this.seeGiftProductForm.start = 1;
        this.checkPro(null);
      },
      handleCurrentChangeForSeeGiftProduct(pageNum) {
        this.seeGiftProductForm.start = pageNum;
        this.checkPro(null);
      },

      // 换条数刷新
      handleSizeChangeForGiftProduct: function (pageSize) {
        this.giftProductForm.limit = pageSize;
        this.giftProductForm.start = 1;
        this.giftProductFormFind();
      },
      handleCurrentChangeForGiftProduct: function (pageNum) {
        this.giftProductForm.start = pageNum;
        this.giftProductFormFind();
      },
      resetForm(formName) {
        this.resetFormSearch(formName);
        this.checkPro(null);
      },
      resetFormSearch(formName) {
        if (this.$refs[formName] != undefined) {
          this.$refs[formName].resetFields();
        }
      },
      checkPro(row) {
        this.currentRule = row;
        if(this.activityData.giftType == 1){//赠商品
          this.giftProductVisible = true;
          this.getGiftItemList();
        }else if(this.activityData.giftType == 2){//赠优惠券
          this.giftCouponsVisible = true;
          this.getGiftCouponItemList();
        }else{
          this.redPacketsVisible = true;
          this.getRedPacketsItemList();
        }
      },

      getGiftCouponItemList(){
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftCouponsTableData = res.data.rows.map((ele, index) => {
              let item = {
                //id: ele.id,
                id: ele.couponId,
                couponName: ele.couponName,
                couponAmount: ele.couponAmount,
                couponUseStartTime: ele.couponUseStartTime,
                couponUseEndTime: ele.couponUseEndTime,
                grantTotalNum: ele.grantTotalNum,
                grantNum: ele.grantNum,
                individualLimit: ele.individualLimit,
                couponUseDesc: ele.couponUseDesc,
                useTotalAmountLimit: ele.useTotalAmountLimit,
                itemId: ele.id,
              };
              return item;
            });
            this_.giftCouponsTableDataSize = res.data.total;
          }
        };
        this.giftCouponsForm.promotionId = this.promotionId;
        this.giftCouponsForm.promotionRuleId = this.currentRule.id;
        this.giftCouponsForm.giftType = 4;
        marketRequest.promotionGiftItemFindByPage(this.giftCouponsForm, callback);
      },
      getGiftItemList(){
        let this_ = this;
        //查询promotion_gift_item 列表并赋值给
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftProductTableData = res.data.rows.map((ele, index) => {
              let item = {};
              item.id = ele.productId;
              item.code = ele.mpCode;
              item.chineseName = ele.mpName;
              item.storeName = ele.storeName;
              item.merchantName = ele.merchantName;
              item.giftNum = ele.giftNum;
              item.channelMerchantLimit = ele.channelMerchantLimit;
              item.orderLimit = ele.orderLimit;
              item.channelIndividualLimit = ele.channelIndividualLimit;
              item.itemId = ele.id;
              item.stock = ele.stock;
              item.salePrice = ele.salePrice;
              item.goodsCategory = ele.goodsCategory;
              return item;
            });
            this_.seeGiftProductTableDataSize = res.data.total;
          }
        };
        this.seeGiftProductForm.promotionId = this.promotionId;
        this.seeGiftProductForm.promotionRuleId = this.currentRule ? this.currentRule.id : '';
        this.seeGiftProductForm.giftType = 1;
        marketRequest.promotionGiftItemFindByPage(this.seeGiftProductForm, callback);
      },
      findAllRules(){
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.giftRuleTable = res.data;
          }
        };
        let param = {
          "promotionId": this.$route.params.id,
          "deleteFlag": 0,
        };
        this.utils.request.promotionRuleFindAll(param, callback);
      },
      submitFormAdminNotPass(){
        this.$refs.adminDataForm.validate(auditRemarkE => {
          if (auditRemarkE) {
            let this_ = this;
            this.dialogVisibleAdmin = false;

            let callback = res => {
              this_.activityData.status=4;

            };
            this.adminDataForm.id = this.promotionId;
            this.adminDataForm.status = 4;
            this.utils.request.promotionUpdate(this.adminDataForm, callback);
          }
        });

      },
      submitFormAdmin(){
        let this_ = this;
        this.dialogVisibleAdmin = false;

        let callback = res => {
          this_.getDetailById();
        };
        this.adminDataForm.id = this.promotionId;
        this.adminDataForm.status = 11;
        this.utils.request.promotionUpdate(this.adminDataForm, callback);
      },

      shenheHuodong(flag){
        this.resetFormSearch("adminDataForm")
        let this_ = this;
        if(flag == 0){
          this.$confirm("确认提交审核？", "提示", {
            type: "warning"
          })
            .then(() => {
              let callback = res => {
                if(res.code=="0000"){
                  this_.activityData.status = 2;
                }else if(res.code=="0001"){
                  that.$message({ message: res.msg, type: "error" });
                }
              };
              let param = {};
              param.id = this.promotionId;
              param.status = 2;
              this.utils.request.reviewPromotion(param,callback);
            })
            .catch(() => {
            });
        }else{
          this.dialogVisibleAdmin = true;
          this.adminDataForm.auditRemark = null;
        }
      },


      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      revokeProduct() {
        let this_ = this;
        let callback = function(res) {
          if (res.code == "0000") {
            this_.getMerchantProductList();
          } else {
            //alert("修改失败");
          }
        };
        if (this.multipleSelection.length > 0) {
          let ids = this.multipleSelection.map(item => item.id);
          this.utils.request.promotionRevokeProduct({"mpIds": ids}, callback);
        } else {
          this.$message({message: "操作失败, 请选择要撤出的商品",type: "error"});
        }
      },
      createPage(){
        this.$router.push("/CreatePromotion");
      },
      getProPlatform(code){
        return proPlatformConverter(code);
      },
      getProUserType(code){
        return proUserTypeConverter(code);
      },
      getChannelCodes(code){
        let item = this.channelList.find(function (item, index) {
          return item.id == code
        })
        return typeof(item)=="undefined" ? "" : item.childName;
      },
      getFrontPromType(code){
        return frontPromTypeConverter(code)
      },
      getProMemberType(code){
        return proMemberTypeConverter(code)
      },
      getProMemberLevel(code){
        return proMemberLevelConverter(code)
      },
      getMerchantOrStoreList(){
        alert("aaa");
      },
      //查询绑定关系的商家
      mainMerchantFormFind(){
        var this_ = this;
        //let params ={"promotionId" : this.promotionId, "merchantType": "1"};
        this.businessForm.promotionId = this.promotionId;
        this.utils.request.promotionMerchantList(this.businessForm, function (res) {
          if (res.code == "0000") {
            this_.businessList = res.data.list.map((ele, index) => {
              let merchant = {};
              merchant.id = ele.orgNumber;
              merchant.name = ele.merchantName;
              merchant.type = ele.merchantTypeManager == '1' ? '自营商家' : '第三方商户';
              return merchant
            })
            this_.businessListTotal = res.data.totalCount;
          }
        });
      },
      //查询绑定关系的店铺
      mainStoreTableDataFormFind(){
        //let params ={"promotionId" : this.promotionId, "merchantType": "2"};
        var  this_ = this;
        this.shopForm.promotionId = this.promotionId;
        this.utils.request.promotionMerchantList(this.shopForm, function (res) {
          if (res.code == "0000") {
            this_.shopList = res.data.list.map((ele, index) => {
              let store = {};
              store.id = ele.storecode;
              store.name = ele.storename;
              store.type = ele.storeType == '1' ? "线上店铺" : "线下店铺";
              store.merchantName = ele.merchantName;
              return store
            });
            this_.shopListTotal = res.data.totalCount;
          }
        });
      },
       /**
     * 查询生效商品
     */
    getMerchantProductList() {
      var this_ = this;
      this.merchantProductSearchForm.promotionId = this.$route.params.id;
      marketRequest.getProductListV3(this.merchantProductSearchForm, res => {
        if (res.code == "0000") {
          this_.merchantProductTableData = res.data.rows;
          this_.merchantProductTableDataTotal = res.data.total;
          if(this_.merchantProductTableDataTotal>9999){
            this_.noMutexProductLabel = "生效商品（9999+）";
          }else{
            this_.noMutexProductLabel = "生效商品（"+res.data.totalCount+"）";
          }
        }
      });
    },

    /**
     * 查询互斥商品
     */
    getMutexProductList() {
      var this_ = this;
      this.mutexProductForm.promotionId = this.$route.params.id;
      marketRequest.getProductListV3(this.mutexProductForm, res => {
        if (res.code == "0000") {
          this_.mutexProductList = res.data.rows;
          this_.mutexProductTotal = res.data.total;
          if(this_.mutexProductTotal>9999){
            this_.mutexProductLabel = "互斥商品（9999+）";
          }else{
            this_.mutexProductLabel = "互斥商品（"+res.data.totalCount+"）";
          }
        }
      });
    },
    /**
     * 每页条数改变触发
     */
    handleSizeChangeMutexProductList(val){
      this.mutexProductForm.limit = val;
      this.mutexProductForm.start = 1;
      this.getMutexProductList();
    },
    /**
     * 换页刷新
     */
    handleCurrentChangeMutexProductList(val){
      this.merchantProductSearchForm.start = val;
      this.getMutexProductList();
    },
    /**
     * 互斥商品查看详情
     */
    getMutexInfo(row){
      let that = this;
      this.mutexPromotionForm.promotionMerchantProductId = row.id;
      this.mutexPromotionForm.start = 1;
      this.mutexPromotionForm.limit = 10;
      this.getPromotionMutexListByProductId();
    },
    getPromotionMutexListByProductId(){
      let that = this;
      this.utils.request.getPromotionMutexListByProductId(this.mutexPromotionForm,res=>{
        if(res.code=='0000'){
            that.mutexPromotionList = res.data.rows;
            that.mutexPromotionListTotal = res.data.total;
            that.mutexPromotionVisible = true;
        }
      });
    },

    /**
     * 每页条数改变触发
     */
    mutexPromotionListSizeChange(val){

      this.mutexPromotionForm.limit = val;
      this.mutexPromotionForm.start = 1;
      this.getPromotionMutexListByProductId();
    },
    /**
     * 换页刷新
     */
    mutexPromotionListCurrentChange(val){

      this.mutexPromotionForm.start = val;
      this.getPromotionMutexListByProductId();
    },

    /**
     * 互斥商品重新添加
     */
    renewAdd(row){

      let that = this;
      let param = {};
      var productIdList = [];
      param.promotionId = row.promotionId;
      param.promotionType = 1;

      if(row.typeOfProduct == '10'){
          //spu
          row.children.forEach(item=>{
            productIdList.push(item.id);
          })
      }else if(row.typeOfProduct == '20'){
        productIdList.push(row.id);
      }

      param.productIdList = productIdList;
      this.utils.request.renewAddMutexProduct(param,res=>{
        if(res.code=='0000'){
          that.getMutexProductList();
          that.getMerchantProductList();

          let data = res.data;
          if(data.businessCode == '0001'){
            this.$message({message: data.businessMsg, type: "success"});
          }else if(data.businessCode == '0002'){
            this.$message({message:data.businessMsg, type: "error"})
          }else if(data.businessCode == '0003'){
            this.$alert(data.businessMsg, '提示', {
              confirmButtonText: '知道了',
              callback: action => {}
            });
          }

        }
      });
    },
    /**
     * 点击活动名称跳转详情
     */
    linkInfoByMutexProduct(promotionId,type){
      if(type == 1){
        this.$router.push({ path: "/SinglePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/SinglePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 2){
        this.$router.push(`/FullNumPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 3){
        this.$router.push({ path: "/FullPromotionDetailNew/" + promotionId + "/0"});
        //this.$router.push(`/FullPromotionDetailNew?id=${promotionId}&auth=0`);
      }else if(type == 4){
        this.$router.push(`/SeckillDetail?promotionId=${promotionId}`);
      }else if(type == 5){
        this.$router.push({ path: "/GiftPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/GiftPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 6){
        this.$router.push({ path: "/ComplexPromotionInfo/" + promotionId});
      }else if(type == 7){
        this.$router.push({ path: "/XofferPromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/XofferPromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 8){
        this.$router.push({ path: "/IncreasePromotionDetail/" + promotionId + "/0"});
        //this.$router.push(`/IncreasePromotionDetail?id=${promotionId}&auth=0`);
      }else if(type == 9){
        this.$router.push(`/QueryPresellPromotion?value=${promotionId}&auth=0`);
      }else if(type == 10){
        this.$router.push("/GroupDetailPromotion?id=" + `${promotionId}`);
      }else if(type == 12){
        this.$router.push(`/QueryPromotion?value=${promotionId}&auth=0`);
      }
    }
  },
    mounted() {
    }
  };
</script>

<style scoped lang="scss">
@import '../../../assets/css/public.scss';
.ml32{
  margin-left: 32px !important;
}
.ml64{
  margin-left: 64px !important;
}
.w80{
  width:80px
}
.pdl30{
  padding-left: 30px;
}
.lh25{
  line-height: 25px;
}
.pdl60{
  padding-left: 60px;
}
.w144{
  width: 144px;
}
.oe{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.width100{
  width: 97px;
}
.width120{
  width: 150px;
}
.mr10{
  margin-right: 10px;
}
.mb10{
  margin-bottom: 10px;
}
.ml33{
  margin-left: 33px;
}
.pdl30{
  padding-left: 30px;
}
.pdt20{
  padding-top: 20px;
}
.img{
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("../../../assets/iconfont/save.png") ;
    vertical-align: middle;
    margin-bottom: 5px;
    margin-right: 5px;
  }
</style>
